<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" th:href="@{/pages/favicon.ico}" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/pages/css/font.css}" href="./css/font.css">
    <link rel="stylesheet" th:href="@{/pages/css/xadmin.css}" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" th:src="@{/pages/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/pages/js/xadmin.js}" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body">
        <form class="layui-form" >
          <div class="layui-form-item">
              <label for="groupName" class="layui-form-label">
                  <span class="x-red">*</span>分组名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="groupName" name="groupName" lay-verify="required" class="layui-input"/>
              </div>

          </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red"></span>平台
                </label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-filter="platform" th:each="platform:${platformList}" th:value="${platform.id}" lay-skin="primary" th:attr="title=${platform.platformName}" />
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red"></span>平台顺序
                </label>
                <div class="layui-input-block ">
                    <div class="platform-order"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="add">增加</button>
            </div>

      </form>
    </div>
    <script>
        layui.use(['form','layer','laydate'], function(){
            $ = layui.jquery;
          var form = layui.form,
          layer = layui.layer;

          //自定义验证规则
          form.verify({

          });
            //监听多选框
            form.on('checkbox(platform)', function(data){
                var $span = $('<span class="layui-badge-rim layui-bg-gray" style="margin-top: 10px;"></span>');
                var $input = $('<input type="hidden" name="platformIds"/>');
                console.log(data.elem.checked); //是否被选中，true或者false
                console.log(data.value); //复选框value值，也可以通过data.elem.value得到
                console.log(data.elem.title);
                //如果选中，则增加
                var className = "rm-platform-"+data.value;
                if(data.elem.checked){
                    $span.text(data.elem.title);
                    $span.addClass(className);
                    $(".platform-order").append($span);
                    $(".platform-order").append("&nbsp;");
                    $input.val(data.value);
                    $input.addClass(className);
                    $(".platform-order").append($input);
                }else{
                    $(".platform-order").find("."+className).remove();
                }
            });

            //监听提交
          form.on('submit(add)', function(data){
              $.post("/manage/platformgroup/add",$("form").serialize(),function (data,status,jqhr) {
                  if(jqhr.status==200){
                      layer.alert("保存成功", {icon: 6},function () {
                          // 获得frame索引
                          var index = parent.layer.getFrameIndex(window.name);
                          //关闭当前frame
                          parent.layer.close(index);
                          parent.location.replace(parent.location.href);
                      });
                  }else{
                      layer.msg(data,{icon:2,time:1000});
                  }
              });
              return false;
          });

        });
    </script>
  </body>

</html>